﻿<template>
  <el-dialog :title = 'dialogEditTitle' :visible.sync = 'dialogEditVisible' :width = 'dialogEditWidth' :before-close = 'closeDialog'
  class = 'md_dialog'>
    <el-form>
      <el-form-item>
        <Editor-Md-Json ref = "myJSONEditor" :disabled = "eventJson_disabled" editId = 'eventJson_edit' showId = 'eventJson_show'
        :defaultValue.sync = 'jsonDialogValue' :showMDJson = 'dialogEditVisible'></Editor-Md-Json>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin' v-if = "editInfo.status !== 'show'">
        <el-button type = "info"  @click = "closeDialog">取 消</el-button>
        <el-button type = "primary" @click = "handleSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// JSONEditor编辑器
import EditorMdJson from '@/components/EditorMd/EditorMdJson'
export default {
  props: ['editInfo', 'showResponseDialog'],
  components: {
    EditorMdJson
  },
  data () {
    return {
      dialogEditVisible: false,
      dialogEditTitle: '查看响应数据信息',
      dialogEditWidth: '90%',
      jsonDialogValue: null,
      eventJson_disabled: false
    }
  },
  methods: {
    // 点击上部的X关闭弹窗时
    closeDialog () {
      this.$emit('giveUp')
    },
    // 点击确定按钮时
    handleSubmit () {
      // 获取json的值
      this.$refs.myJSONEditor.getMdValue()
      if (this.jsonDialogValue !== 'JsonError') {
        this.$emit('sureEdit', decodeURIComponent(this.jsonDialogValue))
      }
    }
  },
  watch: {
    showResponseDialog: {
      handler: function (val, oldVal) {
        this.dialogEditVisible = val
        if (val) {
          if (this.editInfo.status === 'show') {
            this.dialogEditTitle = '查看响应数据信息'
            this.eventJson_disabled = true
          } else {
            this.dialogEditTitle = '编辑响应数据信息'
            this.eventJson_disabled = false
          }
          // 获取初始值
          this.jsonDialogValue = this.editInfo.response_data ? encodeURIComponent(this.editInfo.response_data) : null
        }
      },
      deep: true
    }
  }
}
</script>
